<template>
  <view class="container">
    
    <image class="banner" src="https://bjd-prod.oss-cn-hangzhou.aliyuncs.com/banner1.jpg" mode="aspectFill" ></image>

    <view class="search-box">
      <input class="input" type="text" v-model="orderNo" placeholder="请输入订单号或物流编号" />
      <button class="search-btn" @click="handleSearch">查询</button>
    </view>
    
    <view class="service-btn" @click="handleService">
      <uni-icons type="headphones" size="20" color="#ff4f4f"></uni-icons>
      <text>联系客服</text>
    </view>

    <!-- 订单列表区域 -->
    <view class="order-list" v-if="orderList.length > 0">
      <view class="order-item" v-for="item in orderList" :key="item.orderId">
        <view class="order-status">{{item.orderStatus}}</view>
        <view class="order-content">
          <view class="order-image">
            <image :src="item.imageUrl || '/static/images/index/doll-sample.png'" mode="aspectFill"></image>
          </view>
          <view class="order-info">
            <view class="info-title">{{item.dollNo}}</view>
            <view class="info-row">
              <text class="label">娃娘名称：</text>
              <text class="value">{{item.dollName}}</text>
            </view>
            <view class="info-row">
              <text class="label">手机号：</text>
              <text class="value">{{item.dollPhone || '暂无'}}</text>
            </view>
            <view class="info-row wechat-status">
              <text class="label">微信绑定：</text>
              <text class="value" :class="item.bindStatus === 1 ? 'bound' : 'unbound'">{{item.bindStatus === 1 ? '已绑定' : '未绑定'}}</text>
            </view>
          </view>
        </view>
        <view class="order-actions">
          <button v-if="item.bindStatus === 0" class="bind-btn" @click="handleBindWechat(item.orderNo)">绑定微信</button>
          <button v-if="item.bindStatus === 1 && item.isMindBind" class="unbind-btn" @click="handleUnbindWechat(item.orderNo)">解除绑定</button>

          <button v-if="item.bindStatus === 1 && item.isMindBind" class="bind-btn" @click="viewDetail(item.orderNo)">完善详情</button>
          
        </view>
      </view>
    </view>
  </view>
  <uni-popup ref="servicePopup" type="dialog">
    <uni-popup-dialog
      type="info"
      title="客服二维码"
      :before-close="true"
      @close="closeServicePopup"
    >
      <view class="qrcode-container">
        <image class="service-qrcode" src="https://bjd-prod.oss-cn-hangzhou.aliyuncs.com/public/common/3943bf100b904abab70ca3268d69b64d_20250307201726.jpg" mode="aspectFit" />
        <text class="qrcode-tip">添加客服微信</text>
      </view>
    </uni-popup-dialog>
  </uni-popup>
</template>

<script setup>
import { ref,onMounted } from 'vue';
import { useRouter } from 'vue-router';
import { appOrderApi } from '@/api/business/bjd/app-order-api';
import { appDollApi } from '@/api/business/bjd/app-doll-api';



const orderNo = ref('');
const servicePopup = ref(null);
const orderList = ref([]);

 onMounted(() => {
  //获取token
  // const token = uni.getStorageSync(USER_TOKEN);
  
  // // 如果 token 为空 则跳转登录页
  // if (!token) {
  //   uni.navigateTo({
  //     url: '/pages/login/login'
  //   });
  //   return;
  // }


});

const handleSearch = async () => {
  if (!orderNo.value) {
    uni.showToast({
      title: '请输入订单号或物流编号',
      icon: 'none'
    });
    return;
  }

  const param = {
    orderNo : orderNo.value
  }

  //查询中的效果
  // await uni.showLoading({
  //   title: '查询中...',
  //   mask: true
  // });
  const dataList = await appOrderApi.list(param);
  console.log(dataList.data)

  //如果dataList.data为空 则提示没有数据
  if (dataList.data.length === 0) {
    await uni.showToast({
      title: '查询不到信息',
      icon: 'none',
      duration: 2000
    });
  }
  orderList.value = dataList.data;
  //uni.hideLoading();
};

const handleService = () => {
  //servicePopup.value.open();
  uni.previewImage({
    urls: ['https://bjd-prod.oss-cn-hangzhou.aliyuncs.com/public/common/3943bf100b904abab70ca3268d69b64d_20250307201726.jpg'],
  });

};

const closeServicePopup = () => {
  servicePopup.value.close();
};

const viewDetail = (orderNo) => {
  uni.navigateTo({
    url: `/pages/doll/dollDetail?orderNo=${orderNo}`
  });
};

const handleBindWechat = async (orderNo) => {
  uni.showModal({
    title: '绑定',
    content: '确定要绑定吗？',
    success: async function (res) {
      if (res.confirm) {
        try {
          const param = {
            orderNo : orderNo
          }
          await appDollApi.bind(param);
          await handleSearch();
          uni.showToast({
            title: '绑定成功',
            icon: 'success'
          });
        } catch (error) {
          uni.showToast({
            title: '绑定失败',
            icon: 'error'
          });
          console.error('绑定失败:', error);
        }
      }
    }
  });
};

const handleUnbindWechat = async (orderNo) => {
  uni.showModal({
    title: '解除绑定',
    content: '确定要解除微信绑定吗？',
    success: async function (res) {
      if (res.confirm) {
        const param = {
          orderNo : orderNo
        }
        await appDollApi.unbind(param);
        await handleSearch();
        uni.showToast({
          title: '解除绑定成功',
          icon:'success'
        });
      } else {
        uni.showToast({
          title: '取消解除绑定',
          icon: 'none'
        });
      }
    }
  });
};
</script>

<style lang="scss" scoped>
.container {
  min-height: 100vh;
  background-color: #f5f5f5;
  padding: 20rpx;
}

.banner {
  display: block;
  width: 100%;
  height: 360rpx;
  border-radius: 16rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.1);
  object-fit: cover;
  margin-top: 150rpx;
}

.search-box {
  margin-top: 30rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 30rpx;
  
  .title {
    font-size: 28rpx;
    color: #333;
    margin-bottom: 20rpx;
  }
  
  .input {
    width: 100%;
    height: 80rpx;
    background-color: #f8f8f8;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 28rpx;
    margin-bottom: 30rpx;
  }
  
  .search-btn {
    width: 100%;
    height: 88rpx;
    background: linear-gradient(to right, #ff6b8b, #ff6b8b);
    color: #fff;
    font-size: 32rpx;
    border-radius: 44rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    box-shadow: 0 4rpx 12rpx rgba(255, 79, 79, 0.2);
    transition: all 0.3s ease;

    &:active {
      transform: scale(0.98);
      box-shadow: 0 2rpx 8rpx rgba(255, 79, 79, 0.15);
    }
  }
}

.service-btn {
  margin-top: 40rpx;
  background-color: #fff;
  border-radius: 16rpx;
  padding: 20rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  
  .service-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 10rpx;
  }
  
  text {
    font-size: 28rpx;
    color: #ff4f4f;
    margin-left: 10rpx;
  }
}

.qrcode-container {
  padding: 20rpx;
  display: flex;
  flex-direction: column;
  align-items: center;
  
  .service-qrcode {
    width: 400rpx;
    height: 400rpx;
    margin-bottom: 20rpx;
  }
  
  .qrcode-tip {
    font-size: 28rpx;
    color: #666;
  }
}

.order-list {
  margin-top: 30rpx;
  padding: 0 20rpx;
}

.order-item {
  background-color: #fff;
  border-radius: 24rpx;
  padding: 30rpx;
  margin-bottom: 30rpx;
  position: relative;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
}

.order-status {
  position: absolute;
  top: 30rpx;
  right: 30rpx;
  color: #ff4f4f;
  font-size: 28rpx;
  font-weight: 500;
}

.order-content {
  display: flex;
  margin-top: 20rpx;
}

.order-image {
  width: 200rpx;
  height: 200rpx;
  margin-right: 20rpx;
  
  image {
    width: 100%;
    height: 100%;
    border-radius: 12rpx;
    object-fit: cover;
  }
}

.order-info {
  flex: 1;
}

.info-title {
  font-size: 32rpx;
  color: #333;
  font-weight: 500;
  margin-bottom: 20rpx;
}

.info-row {
  margin-bottom: 16rpx;
  font-size: 28rpx;
  display: flex;
  align-items: center;
  
  .label {
    color: #999;
    width: 160rpx;
  }
  
  .value {
    color: #333;
    flex: 1;
  }
}

.order-price {
  display: flex;
  align-items: center;
  margin-top: 20rpx;
  
  .price-label {
    font-size: 28rpx;
    color: #999;
  }
  
  .price-value {
    font-size: 32rpx;
    color: #ff4f4f;
    font-weight: bold;
  }
}

.wechat-status {
  margin-top: 10rpx;
  
  .bound {
    color: #07c160;
  }
  
  .unbound {
    color: #ff4f4f;
  }
}

.order-actions {
  display: flex;
  justify-content: flex-end;
  gap: 20rpx;
  margin-top: 30rpx;
  
  .bind-btn,
  .unbind-btn,
  .detail-btn {
    min-width: 160rpx;
    height: 64rpx;
    font-size: 28rpx;
    border-radius: 32rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    transition: all 0.3s ease;
    box-shadow: 0 4rpx 12rpx rgba(255, 79, 79, 0.2);
    
    &:active {
      transform: scale(0.95);
      opacity: 0.9;
    }
  }

  
  .bind-btn {
    background: linear-gradient(to right, #ff6b8b, #ff6b8b);
    color: #fff;
  }

  .unbind-btn {
    background: linear-gradient(to right, #ff6b8b, #ff6b8b);
    color: #fff;
  }

  .detail-btn {
    background: linear-gradient(to right, #ff6b8b, #ff6b8b);
    color: #fff;
  }
}
</style>